<style include="print-preview-shared cr-hidden-style throbber">
  #dialog::part(dialog) {
    height: -webkit-fit-content;
    max-height: calc(100vh - 4 * var(--print-preview-dialog-margin));
    max-width:  calc(100vw - 4 * var(--print-preview-dialog-margin));
  }

  .throbber-placeholder {
    height: 16px;
    margin: 4px;
    width: 16px;
  }

  .message {
    line-height: calc(20/13 * 1em);
    margin: 0;
    padding-bottom: 12px;
    padding-top: 8px;
  }

  .extension-desc {
    display: flex;
  }

  .extension-icon {
    background-position: center;
    background-repeat: none;
    height: 24px;
    width: 24px;
  }

  .extension-name {
    color: var(--cr-primary-text-color);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    line-height: 20px;
    margin-inline-start: 1em;
    overflow-wrap: break-word;
  }

  /* override print preview shared style */
  #dialog #buttons {
    box-shadow: none;
  }
</style>
<cr-dialog id="dialog" on-close="onCancel_">
  <div slot="title">$i18n{resolveExtensionUSBDialogTitle}</div>
  <div slot="body">
    <p class="message">
      [[getPermissionMessage_(state_, destination_.extensionName)]]
    </p>
    <div class="extension-desc" hidden="[[isInErrorState_(state_)]]">
      <div class$="throbber-placeholder [[getThrobberClass_(state_)]]"
          role="img" alt=""></div>
      <div class="extension-icon" role="img" alt=""></div>
      <div class="extension-name">
        [[destination_.extensionName]]
      </div>
    </div>
  </div>
  <div slot="button-container" id="buttons">
    <cr-button class="cancel-button" on-click="onCancelClick_">
      $i18n{goBackButton}
    </cr-button>
    <cr-button class="action-button"
        hidden="[[isInErrorState_(state_)]]"
        disabled="[[!isInActiveState_(state_)]]"
        on-click="startResolveDestination_">
      $i18n{selectButton}
    </cr-button>
  </div>
</cr-dialog>
